<!-- 诉求显示页面(企业端) -->
<!-- 只显示待审核和被驳回的诉求 -->
<template>

    <div id="appealuser">
      <div class="history" >
        <el-button @click="allealuserhistory" type="text">历史记录</el-button>
      </div>
      <div v-for="item in appeal" :key="item">
      <div>
      <div class="divtwo">
        <p class="pone">核心诉求{{item.appealreportingId}}</p>
        <p class="edit">
          <el-button @click="allealuseredit(item.appealreportingId)" type="text">修改诉求</el-button>
        </p>
      </div>
      <div class="divthree">
          <span class="manzulv">诉求描述</span>
      </div>
      <div class="divinput">
        <!-- <el-input size="small" v-model="input" type="text" placeholder="请输入内容"></el-input> -->
        <el-input class="area" type="textarea" v-model="item.appealthemeName" style="width:600px;background-color:rgb(176, 175, 220) ;" readonly="true"></el-input>
      </div>
    </div>
      <div class="divfour">
        <span class="jingji">审核状态</span>
        <select class="sel" v-model="item.rejectid">
            <option value="1">待处理</option>
            <option  value="2">被退回</option>
            <!-- <option  value="3">特急</option> -->
        </select>
      <div id="divfour-1">
        <span class="xuanzhe">退回原因:{{item.rejectcontent}}
        </span>
      </div>
          
       
      </div>
    </div>
      <div class="divfive">
        <el-button @click="allealuserAdd" type="text" size="small">新增诉求</el-button>
      </div>
    </div>
  </template>

<script>
import axios from 'axios'

export default {

  data () {
    return {
      userid: localStorage.getItem('userId'),
      tradeId: '0',
      currpage: '1',
      appeal: [],
      appealid: '',
      selectappealAllbyStatusurl: 'http://localhost:8081/appeal/selectappealAllbyStatus/',
    }
  },
  methods: {

    // 最多查询5条数据，按id排序 Access-Control-Allow-Origin
    selectAllappeal () {
      axios({
        method: 'get',
        url: this.selectappealAllbyStatusurl  + '/1/0/' + this.userid + '/' + this.tradeId + '/' + this.currpage ,
        headers: {
          'Access-Control-Allow-Origin': '*'
        }
      }).then(
        res => {
          console.log(res.data)
          this.appeal = res.data
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    },

    // 跳转历史记录界面
    allealuserhistory () {
      this.$router.push('/appealreportingUserhistory')
    },

    // 跳转诉求修改页面
    allealuseredit (appealid) {
    
      this.$router.push({
        path: '/appealreportingUserUpdate',
        query: {
          appealid: appealid
        }
      })
    },

    // 跳转诉求添加页面
    allealuserAdd () {
      this.$router.push({
        path: '/appealreportingUserAdd',
      })
    },
    goBack () {
      this.$router.go(-1)
    },
  
  },
  mounted () {
    // alert("中断")
    this.selectAllappeal()
  }
}
</script>

  <style scoped>
     .pdiv{
      position: relative;
      margin-top: -20px;
      padding-left: 50px;
    }
    .divtwo{
      width: 800px;
      height: 28px;
      background-color: white;
      border-bottom: #cac6c6 solid 2px;
      padding-left: 50px;
      /* margin-top: -20px; */
      text-align: left;
    }
     .pone{
      font-size: 16px;
      font-weight: bolder;
      color: blue;
      margin-top: 24px;
    }
   .divthree{
      width: 180px;
      height: 71px;
      background-color: rgb(43, 83, 214);
      float: left;
      margin-left: 25px;
      margin-top: 10px;
      text-align: center;
    }
     .manzulv{
      line-height: 71px;
      color: white;
      font-weight: bolder;
    }
     .divinput{
      position: relative;
      /* right: 180px; */
      margin-top: 10px;
      
    }
    .divfour{
      margin-left:25px;
      margin-top: 10px;
      width: 180px;
      height: 40px;
      background-color: rgb(43, 83, 214);
      text-align: center;
    }
    .jingji{
      width: 170px;
      height: 40px;
      color: white;
      font-size: 16px;
      font-weight: bolder;
      line-height: 40px;

    }
    .sel{
      position: relative;
      bottom: 40px;
      left: 180px;
      width: 180px;
      height: 41px;
      background-color: rgb(176, 175, 220);
      text-align: center;
    }
    .divfive{
      margin-left:25px;
      margin-top: 60px;
      width: 180px;
      height: 40px;
      background-color: rgb(43, 83, 214);
    }
    .divfive .el-button{
      text-align: center;
      color: white;
      width: 180px;
      font-size: 16px;
      font-weight: bolder;
      line-height: 20px;
    }
    .xuanzhe{
      color: #cac6c6;
      position: relative;
      left: 380px;
      bottom: 75px
      
    }
    .edit{
      position: relative;
      top: 100px;
      left: 625px;
      background-color: rgb(43, 83, 214);
      width: 120px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: white;
    }
    .history{
      position: relative;
      left: 675px;
      background-color: rgb(43, 83, 214);
      width: 120px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .history .el-button{
    
      color: white;
      font-size: 16px;
      font-weight: bolder;
      line-height: 10px;
    }
    .edit .el-button{
      text-align: center;
      color: white;
      font-size: 16px;
      font-weight: bolder;
      line-height: 10px;
    }
    #appealuser{
      margin-top: 30px;
      margin-left: 20px;
    }
    #divfour-1{
      text-align: left;
    }
  </style>
